<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>工序</el-breadcrumb-item>
    </el-breadcrumb>

    <div>
      <el-card class="box-card">
        <div align="center" class="d1" style="color: mediumblue">
          <div style="float: right">
            <el-button type="text" @click="importExcelVisible=true ">导入</el-button>
            <el-button type="text" @click="exportExcel">导出</el-button>
          </div>
          <h3>工序管理界面</h3>

        </div>
        <div>
          <el-form :model="searchForm" class="d2">
            <el-row :gutter="20">
              <el-form-item>
                <el-col :span="5">
                  <el-input placeholder="名称" v-model="searchForm.name"></el-input>
                </el-col>
                <div style="float: right">
                  <el-button @click="searchProcess" plain type="info">搜索</el-button>
                  <el-button @click="saveProcess" type="primary">添加工艺</el-button>
                </div>
              </el-form-item>
            </el-row>
          </el-form>
        </div>

        <el-table
          :data="processList"
          stripe
          style="width: 100%">
          <el-table-column
            prop="code"
            label="编号">
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称">
          </el-table-column>
          <el-table-column
            label="收费方式">
            <template slot-scope="scope">
              {{scope.row.ctype | cFit}}
            </template>
          </el-table-column>
          <el-table-column
            prop="price"
            label="单价">
          </el-table-column>
          <el-table-column
            prop="prePrice"
            label="准备工时价">
          </el-table-column>
          <el-table-column
            prop="remarks"
            label="描述">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-col :span="12">
                <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                  <el-dropdown-menu slot="dropdown">
                    <div>
                      <el-button @click="delProcess(scope.row.id)" plain type="danger">删除</el-button>
                    </div>
                    <div>
                      <el-button @click="getProcess(scope.row.id)" plain type="primary">明细</el-button>
                    </div>
                    <div>
                      <el-button @click="updateById(scope.row.id)">修改</el-button>
                    </div>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="page.pagenum"
          :page-size="page.pagesize"
          :page-sizes="[5, 10, 20, 40]"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </el-card>
    </div>


    <el-dialog :close-on-click-modal="false" :visible.sync="processFormVisible"
               @closed="clearprocessForm"> <!--用户表单框 -->
      <el-form :model="processForm" label-width="80px">
        <el-row :gutter="22">
          <el-col :span="12">
            <el-form-item label="编号">
              <el-input v-model="processForm.code" autocomplete="off" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称">
              <el-input v-model="processForm.name" autocomplete="off" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="22">
          <el-col :span="12">
            <el-form-item label="收费方式">
              <el-select v-model="processForm.ctype" placeholder="请选择" autocomplete="off" readonly>
                <el-option label="按时间（分钟）" value="1"></el-option>
                <el-option label="按面积（平方厘米）" value="2"></el-option>
                <el-option label="按重量（千克）" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单价">
              <el-input v-model="processForm.price" autocomplete="off" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="22">
          <el-col :span="12">
            <el-form-item label="准备工时单价" label-width="100px">
              <el-input v-model="processForm.prePrice" autocomplete="off" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="描述">
              <el-input v-model="processForm.remarks" autocomplete="off" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="dialog-footer" slot="footer">
        <el-button @click="processFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="导入excel" :visible.sync="importExcelVisible" :close-on-click-modal="false" width="30%">
      <el-upload
        class="upload-demo"
        drag
        :headers="auth"
        action="/api/process/importExcel"
        :on-success="uploadExcelSuccess"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">上传用户excel数据</div>
      </el-upload>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    name: "Process",
    data() {
      return {
        auth:{},
        importExcelVisible:false,
        processFormVisible: false,
        processForm: {},
        searchForm: {
          name: ""
        },
        processList: [],
        page: {
          pagenum: 0,
          pagesize: 5
        },
        total: 0,
      }
    },
    methods: {
      searchProcess: function () {//用户列表
        this.$http.post("/process/list/" + this.page.pagenum + "/" + this.page.pagesize, this.searchForm).then((res) => {
          this.processList = res.data.result.list;
          this.total = res.data.result.total;
        });
      },
      handleSizeChange: function (val) {
        this.page.pagesize = val;
        this.searchProcess();
      },
      handleCurrentChange: function (val) {
        this.page.pagenum = val;
        this.searchProcess();
      },
      saveProcess: function () {
        this.$router.push('/addProcess')
      },
      getProcess: function (id) {
        this.$http.get("/process/get/" + id).then((res) => {
          this.processForm = res.data.result
          if (res.data.success) {
            this.processForm = res.data.result
          } else {
            this.$message.error(res.data.message);
          }
        })
        this.processFormVisible = true
      },
      delProcess: function (id) {
        this.$http.delete("/process/del/" + id).then((res) => {
          if (res.data.success) {
            this.$message({
              message: res.data.message,
              type: 'success'
            });
          } else {
            this.$message.error(res.data.message);
          }
          this.searchProcess();
        })
      },
      clearprocessForm: function () {
        this.processForm = {}
      },
      updateById: function (id) {
        this.$router.push(
          {
            path: '/addProcess',
            query: {id}
          }
        )
      },
      uploadExcelSuccess:function(res,file){
        this.importExcelVisible=false
        this.searchProcess();
      },
      exportExcel:function () {
        location.href="http://localhost:8080/process/exportExcel"
      }
    },
    mounted() {
      this.auth.token=sessionStorage.getItem("token")
      this.searchProcess();
    },
    filters: {
      cFit: function (val) {
        if (val == 1) {
          return "按时间（分钟）"
        }
        if (val == 2) {
          return "按面积（平方厘米）"
        }
        if (val == 1) {
          return "按重量（千克）"
        }
      }
    }
  }
</script>

<style scoped>
  .d1 {
    border-bottom: 1px solid #333744;
  }

  .d2 {
    margin: 20px
  }

  .el-pagination {
    text-align: center;
  }

</style>
